<template>
  <div class="container">
    <el-row class="">
      <el-col :span="16" align="left">
        <div class="flex">
          <el-input
            clearable
            v-model="data.params.name"
            placeholder="软件名称"
            style="width: 120px; margin-right: 15px"
          >
          </el-input>
          <el-select clearable v-model="data.params.name" placeholder="维护单位">
            <el-option
              :label="el.belongingUnit"
              :value="el.belongingCode"
              :key="k"
              v-for="(el, k) in data.SoftnessList"
            />
          </el-select>
          <el-select clearable v-model="data.params.name" placeholder="软著状态">
            <el-option
              :label="el.itemText"
              :value="el.id"
              :key="k"
              v-for="(el, k) in data.SoftnessList"
            />
          </el-select>
          <el-button color="#626aef" @click="search()">搜索</el-button>
        </div>
      </el-col>
      <el-col :span="8" align="right">
        <el-button class="unlock" @click="getUnlock()">解锁</el-button>
        <el-button class="lock" @click="getLock()">锁定</el-button>
        <el-button class="ordinary" @click="getExport()">批量导出</el-button>
        <el-button type="danger" @click="handleDetect()">批量删除</el-button>
        <el-button type="primary" @click="handleAdd()">新增</el-button>
      </el-col>
    </el-row>

    <div>
      <Table
        :tableArr="data.allTableData"
        :pagination="data.page"
        :columns="data.columns"
        @delectTable="delectIds"
        :total="data.page.total"
      >
        <template #operate="{ row }">
          <el-button
            size="small"
            class="ordinary"
            :disabled="row.isLock == 1"
            @click="handleEdit(row)"
            >编辑</el-button
          >
          <el-button
            size="small"
            type="primary"
            v-if="row.status == '待确认'"
            :disabled="row.isLock == 1"
            @click="handleConfirm(row)"
            >确认</el-button
          >
        </template>
      </Table>
    </div>

    <el-dialog v-model="data.dialogVisible" width="60%" :show-close="false">
      <template #title>
        <div class="my-header">
          <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="基本信息" name="first">
              <Information
                ref="getAssociation"
                v-if="data.dialogVisible"
                @valueFlag="valueFlag"
              ></Information>
            </el-tab-pane>
            <el-tab-pane label="团队成员" name="second">
              <Members
                :members="data.members"
                @dataChange="dataChange"
                @paramsChange="paramsChange"
              ></Members>
            </el-tab-pane>
            <el-tab-pane label="相关附件" name="third">
              <platformFiles
                :files="data.files"
                @dataChange="dataChange"
                @filesParams="filesParams"
              ></platformFiles>
            </el-tab-pane>
            <el-tab-pane label="变更记录" name="fourth" v-if="data.addFlag == 1">
              <record :changeLogs="data.changeLogs"></record>
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCloseDialog">关闭</el-button>
          <el-button type="primary" @click="handleSave()">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import Information from "@/views/science/InnovativeTalents/talentTeam/information.vue";
import {
deleteInnovativeTalentTeam,
getAddInnovativeTalentTeam,
getExportInnovativeTalentTeam,
getInnovativeTalentTeamConfirm,
getInnovativeTalentTeamDetail,
getInnovativeTalentTeamList,
getInnovativeTalentTeamLock,
getInnovativeTalentTeamUnlock,
getUpdateInnovativeTalentTeam,
} from "@/views/science/api/Innovative";
import Members from "@/views/science/components/members/members.vue";
import platformFiles from "@/views/science/components/platformFiles/platformFiles.vue";
import record from "@/views/science/components/record/record.vue";
import SelectOption from "@/views/science/components/selectOption/index.vue";
import Table from "@/views/science/components/table/table.vue";
import { Modals, tips } from "@/views/science/components/tips/tips";
import { computed, reactive, ref } from "vue";
import { useStore } from "vuex";
import tableData from "./tableHeader.json";
export default {
  components: {
    SelectOption,
    Table,
    Information,
    Members,
    platformFiles,
    record,
  },
  setup() {
    const store = useStore();
    const activeName = ref("first");
    let data = reactive({
      SoftnessList: [],
      dialogVisible: false,
      addFlag: 0,
      recordShow: false,
      loading: false,
      page: { page: 1, limit: 10, total: 4 },
      params: {
        name: "",
        unitId: "",
        teamLevelId: "",
        current: 1,
        size: 10,
      },
      selectedRows: [],
      columns: tableData.platformTableHeader,
      ids: [],
      allTableData: [],
      // allTableData: [
      //   {
      //     "id": "1",
      //     "abbreviation": "1",
      //     "level": "1",
      //     "type": "1",
      //     "way": "1",
      //     "rdDept": "1",
      //     "headBy": "1",
      //     "phone": "1",
      //     "status": '0',
      //   },
      //   {
      //     "id": "ed0a6f2f23bf45c9841d629b672238aa",
      //     "abbreviation": "平台简称",
      //     "level": "1",
      //     "type": "1",
      //     "way": "1",
      //     "rdDept": "64d9a5658cf1454185dd3551c1aaf62f",
      //     "headBy": "负责人",
      //     "phone": "14209834339",
      //     "status": '1',
      //   }
      // ],
      orgAllList: computed(() => store.state.technologyStrength.orgAllList),
      levelOptions: computed(() => store.state.innovativeTalents.cxlevelSelect),
      members: [],
      files: [],
      changeLogs: [],
      flag: null,

      baseInfo: [],
      memberList: [],
      fileList: [],
    });

    const value = ref("2021-10-29");
    const holidays = [
      "2021-10-01",
      "2021-10-02",
      "2021-10-03",
      "2021-10-04",
      "2021-10-05",
      "2021-10-06",
      "2021-10-07",
    ];

    const isHoliday = ({ dayjs }) => {
      return holidays.includes(dayjs.format("YYYY-MM-DD"));
    };

    //主页面表格初始化
    const tableList = async () => {
      let res = await getInnovativeTalentTeamList(data.params);
      if (res.data.success) {
        let records = res.data.data;
        records.records.map((item) => {
          if (item.status == 0) {
            item.status = "待确认";
          } else {
            item.status = "已确认";
          }
        });
        data.allTableData = res.data.data.records;
        data.page.total = records.total;
      }
    };

    //详情数据获取
    const detailData = async (id) => {
      let res = await getInnovativeTalentTeamDetail(id);
      if (res.data.success) {
        store.commit("innovativeTalents/getTalentTeamInfo", { ...res.data.data.info });
        data.members = res.data.data.members;
        data.files = res.data.data.files;
        data.changeLogs = res.data.data.changeLogs;
      }
    };

    const changeValue = (item) => (data.params.unitId = item.id);
    const changeValue1 = (item) => (data.params.teamLevelId = item.itemValue);

    const delectIds = (ids) => {
      data.ids = ids;
    };

    const valueFlag = (flag) => {
      data.flag = flag;
    };

    const paramsChange = (params) => {
      data.memberList = params;
    };

    const filesParams = (params) => {
      data.fileList = params;
    };

    const getLock = async () => {
      if (data.ids.length == 1) {
        Modals("是否锁定选择内容", "提示", "warning")
          .then(async () => {
            let res = await getInnovativeTalentTeamLock(data.ids);
            if (res.data.success) {
              tips("锁定成功", "success");
              tableList();
            }
          })
          .catch(() => {
            console.log("点击了取消");
          });
      } else if (data.ids.length == 0) {
        tips("请选择", "warning");
      } else {
        tips("锁定功能不可批量操作", "warning");
      }
    };
    const getUnlock = async () => {
      if (data.ids.length == 1) {
        Modals("是否解锁选择内容", "提示", "warning")
          .then(async () => {
            let res = await getInnovativeTalentTeamUnlock(data.ids);
            if (res.data.success) {
              tips("解锁成功", "success");
              tableList();
            }
          })
          .catch(() => {
            console.log("点击了取消");
          });
      } else if (data.ids.length == 0) {
        tips("请选择", "warning");
      } else {
        tips("解锁功能不可批量操作", "warning");
      }
    };

    const getExport = async () => {
      Modals("是否导出全部数据", "提示", "warning")
        .then(async () => {
          await getExportInnovativeTalentTeam(data.params);
        })
        .catch(() => {
          console.log("点击了取消");
        });
    };

    const handleDetect = async () => {
      if (data.ids.length) {
        Modals("是否删除选择内容", "提示", "warning")
          .then(async () => {
            let res = await deleteInnovativeTalentTeam(data.ids);
            if (res.data.success) {
              tips("删除成功", "success");
              tableList();
            }
          })
          .catch(() => {
            console.log("点击了取消");
          });
      } else {
        tips("请选择", "warning");
      }
    };

    const dataChange = () => {
      detailData(store.state.innovativeTalents.rowId);
    };

    // 点击查询按键，分页设置为当前页为1，
    const search = () => {
      data.page.page = 1;
      console.log(data.params);
      tableList();
    };

    const handleAdd = () => {
      data.dialogVisible = true;
      data.addFlag = 0;
      data.files = [];
      store.commit("innovativeTalents/emptytalentTeamInfo");
    };

    const handleEdit = (row) => {
      detailData(row.id);
      data.dialogVisible = true;
      data.addFlag = 1;
      store.commit("innovativeTalents/getRowId", row.id);
    };

    const handleConfirm = async (row) => {
      Modals("是否确认当前流程", "提示", "warning")
        .then(async () => {
          let res = await getInnovativeTalentTeamConfirm(row.id);
          if (res.data.success) {
            console.log(res);
            tableList();
          }
        })
        .catch(() => {
          console.log("点击了取消");
        });
    };

    const getAssociation = ref();
    const handleSave = async () => {
      const form = store.state.innovativeTalents.talentTeamInfo;
      getAssociation.value.submitForm();
      if (!data.flag) {
        return;
      }
      // if (!validatePhoneNumber(form.managerContract)) {
      //   tips("联系电话格式不正确！", 'warning');
      //   return false;
      // }
      const params = {
        baseInfo: form,
        memberList: data.memberList,
        fileList: data.fileList,
      };
      let res;
      if (data.addFlag == 0) {
        res = await getAddInnovativeTalentTeam(params);
      } else {
        res = await getUpdateInnovativeTalentTeam(params);
      }
      if (res.data.success) {
        console.log(res);
        data.dialogVisible = false;
        activeName.value = "first";
        tableList();
      }
    };

    const handleCloseDialog = () => {
      data.dialogVisible = false;
      data.recordShow = false;
      activeName.value = "first";
    };

    tableList();

    return {
      data,
      activeName,
      valueFlag,
      getAssociation,
      paramsChange,
      filesParams,
      changeValue,
      changeValue1,
      delectIds,
      getLock,
      getUnlock,
      getExport,
      handleDetect,
      handleAdd,
      dataChange,
      handleCloseDialog,
      handleEdit,
      handleConfirm,
      search,
      handleSave,
    };
  },
};
</script>
<style lang="scss" scoped>
.container {
  background-color: white;
  padding: 20px;
}

:deep(.el-dialog__body) {
  display: none;
}

.el-form-item {
  .el-input {
    width: 100px;
  }

  .el-select {
    width: 100px;
  }
}
</style>
